<template>
  <div class="team-collaboration">
    <!-- 导航栏 -->
    <Navbar />
    
    <!-- 英雄区域 -->
    <section class="hero-section">
      <div class="container">
        <div class="back-button-container">
          <button class="back-button" @click="goBackToProducts">
            <i class="fas fa-arrow-left"></i>
            返回产品服务
          </button>
        </div>
        <div class="hero-content">
          <h1 class="hero-title">团队协作挑战</h1>
          <p class="hero-subtitle">组队共同挑战任务，根据贡献比值分配勋章/证书，促进团队合作与技能提升</p>
          <div class="hero-features">
            <div class="feature-item">
              <i class="fas fa-users"></i>
              <span>团队任务匹配</span>
            </div>
            <div class="feature-item">
              <i class="fas fa-chart-line"></i>
              <span>贡献度评估</span>
            </div>
            <div class="feature-item">
              <i class="fas fa-medal"></i>
              <span>协作勋章分配</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 工作流程 -->
    <section class="workflow-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">组队做任务的流程</h2>
          <p class="section-subtitle">公平公正的团队协作机制，确保每个成员的贡献都能得到合理认可</p>
        </div>
        
        <div class="workflow-steps">
          <div class="step" v-for="(step, index) in workflowSteps" :key="index">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3>{{ step.title }}</h3>
              <p>{{ step.description }}</p>
              <ul class="step-details">
                <li v-for="detail in step.details" :key="detail">{{ detail }}</li>
              </ul>
            </div>
            <div class="step-icon">
              <i :class="step.icon"></i>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 贡献评估系统 -->
    <section class="contribution-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">智能贡献评估系统</h2>
          <p class="section-subtitle">基于AI算法的公平评估机制，确保奖励分配的公正性</p>
        </div>
        
        <div class="evaluation-grid">
          <div class="evaluation-card" v-for="(method, index) in evaluationMethods" :key="index">
            <div class="card-icon">
              <i :class="method.icon"></i>
            </div>
            <h3>{{ method.title }}</h3>
            <p>{{ method.description }}</p>
            <div class="evaluation-features">
              <span v-for="feature in method.features" :key="feature" class="feature-tag">
                {{ feature }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 奖励分配机制 -->
    <section class="reward-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">奖励分配机制</h2>
          <p class="section-subtitle">基于贡献比值的公平分配，不根据进入项目时间，确保真正的能力导向</p>
        </div>
        
        <div class="reward-content">
          <div class="reward-principles">
            <h3>分配原则</h3>
            <div class="principles-grid">
              <div class="principle-card" v-for="(principle, index) in rewardPrinciples" :key="index">
                <div class="principle-icon">
                  <i :class="principle.icon"></i>
                </div>
                <h4>{{ principle.title }}</h4>
                <p>{{ principle.description }}</p>
              </div>
            </div>
          </div>
          
          <div class="reward-types">
            <h3>奖励类型</h3>
            <div class="types-grid">
              <div class="type-card" v-for="(type, index) in rewardTypes" :key="index">
                <div class="type-icon" :class="type.class">
                  <i :class="type.icon"></i>
                </div>
                <h4>{{ type.title }}</h4>
                <p>{{ type.description }}</p>
                <div class="type-benefits">
                  <span v-for="benefit in type.benefits" :key="benefit" class="benefit-tag">
                    {{ benefit }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <!-- <section class="success-cases">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">成功案例</h2>
          <p class="section-subtitle">看看其他团队是如何通过协作获得成功的</p>
        </div>
        
        <div class="cases-grid">
          <div class="case-card" v-for="(caseItem, index) in successCases" :key="index">
            <div class="case-header">
              <h3>{{ caseItem.title }}</h3>
              <div class="case-stats">
                <span class="stat">
                  <i class="fas fa-users"></i>
                  {{ caseItem.teamSize }}人团队
                </span>
                <span class="stat">
                  <i class="fas fa-clock"></i>
                  {{ caseItem.duration }}
                </span>
              </div>
            </div>
            <p class="case-description">{{ caseItem.description }}</p>
            <div class="case-results">
              <div class="result-item">
                <span class="result-label">贡献度最高：</span>
                <span class="result-value">{{ caseItem.topContributor }}</span>
              </div>
              <div class="result-item">
                <span class="result-label">获得奖励：</span>
                <span class="result-value">{{ caseItem.rewards }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Footer from './Footer.vue'

export default {
  name: 'TeamCollaboration',
  components: {
    Navbar,
    Footer
  },
  mounted() {
    // 页面加载时滚动到顶部
    window.scrollTo(0, 0)
  },
  methods: {
    goBackToProducts() {
      // 返回到首页的Products部分
      this.$router.push('/').then(() => {
        // 等待页面加载完成后滚动到Products部分
        setTimeout(() => {
          const productsElement = document.getElementById('products')
          if (productsElement) {
            productsElement.scrollIntoView({ 
              behavior: 'smooth',
              block: 'start'
            })
          }
        }, 100)
      })
    }
  },
  data() {
    return {
      workflowSteps: [
        {
          title: '任务发布与选择',
          description: '企业发布团队任务，开发者浏览并选择合适的项目',
          icon: 'fas fa-tasks',
          details: [
            '企业详细描述任务需求和团队规模',
            '开发者根据技能匹配度选择任务',
            '系统智能推荐合适的团队成员'
          ]
        },
        {
          title: '组建团队',
          description: '选择组队接取任务，邀请志同道合的伙伴加入',
          icon: 'fas fa-user-plus',
          details: [
            '发起人创建团队并设置团队目标',
            '通过平台邀请或公开招募成员',
            '团队成员确认加入并签署协作协议'
          ]
        },
        {
          title: '任务执行',
          description: '团队协作完成任务，系统实时跟踪进度和贡献',
          icon: 'fas fa-cogs',
          details: [
            '制定详细的任务分工和时间计划',
            '实时协作工具支持团队沟通',
            'AI系统持续评估每个成员的贡献度'
          ]
        },
        {
          title: '动态招募',
          description: '任务进行中可继续邀请新成员加入，扩大团队规模',
          icon: 'fas fa-user-friends',
          details: [
            '根据任务进展需要招募特定技能人才',
            '新成员快速融入团队协作流程',
            '所有成员享受平等的贡献评估机制'
          ]
        },
        {
          title: '贡献评估',
          description: '基于AI算法公平评估每个成员的实际贡献',
          icon: 'fas fa-chart-pie',
          details: [
            '多维度评估：代码质量、创新性、协作能力',
            '实时跟踪：提交频率、问题解决、团队支持',
            '客观公正：不依赖进入时间，只看实际贡献'
          ]
        },
        {
          title: '奖励分配',
          description: '根据贡献比值公平分配勋章、证书和奖励',
          icon: 'fas fa-trophy',
          details: [
            '按贡献比例分配项目奖励',
            '颁发个人专属勋章和证书',
            '更新个人信誉度和技能档案'
          ]
        }
      ],
      evaluationMethods: [
        {
          title: '代码质量分析',
          icon: 'fas fa-code',
          description: '通过静态代码分析评估代码质量、可维护性和创新性',
          features: ['代码规范', '性能优化', '创新程度', '可读性']
        },
        {
          title: '协作贡献度',
          icon: 'fas fa-handshake',
          description: '评估团队成员间的协作效果和相互支持程度',
          features: ['沟通频率', '问题解决', '知识分享', '团队支持']
        },
        {
          title: '任务完成度',
          icon: 'fas fa-check-circle',
          description: '基于任务完成质量和效率进行综合评估',
          features: ['完成质量', '时间效率', '需求理解', '解决方案']
        },
        {
          title: '学习成长性',
          icon: 'fas fa-graduation-cap',
          description: '评估成员在项目中的学习能力和技能提升',
          features: ['技能提升', '学习态度', '适应能力', '持续改进']
        },
        {
          title: ' 成长真实性',
          icon: 'fas fa-graduation-cap',
          description: '对项目中的成员进行提问，考察其对项目的理解程度以及个人能力水平',
          features: ['项目理解', '个人能力', '回答问题', '真实性']
        }
      ],
      rewardPrinciples: [
        {
          title: '贡献导向',
          icon: 'fas fa-balance-scale',
          description: '完全基于实际贡献度分配奖励，不参考加入时间'
        },
        {
          title: '公平透明',
          icon: 'fas fa-eye',
          description: '所有评估过程和结果完全透明，可追溯可验证'
        },
        {
          title: '能力优先',
          icon: 'fas fa-star',
          description: '重视个人能力和实际表现，而非资历或关系'
        },
        {
          title: '团队协作',
          icon: 'fas fa-users',
          description: '鼓励团队合作，奖励协作精神和互助行为'
        }
      ],
      rewardTypes: [
        {
          title: '个人勋章',
          class: 'medal-gold',
          icon: 'fas fa-medal',
          description: '根据贡献度等级颁发不同级别的个人勋章',
          benefits: ['青铜勋章', '白银勋章', '黄金勋章', '钻石勋章']
        },
        {
          title: '技能证书',
          class: 'certificate-blue',
          icon: 'fas fa-certificate',
          description: '官方认证的技能证书，提升个人职业竞争力',
          benefits: ['技能认证', '官方背书', '职业发展', '信誉提升']
        },
        {
          title: '项目奖励',
          class: 'reward-green',
          icon: 'fas fa-coins',
          description: '根据贡献比例分配的项目奖金和实物奖励',
          benefits: ['现金奖励', '实物奖品', '平台积分', '优先推荐']
        },
        {
          title: '信誉积分',
          class: 'reputation-purple',
          icon: 'fas fa-star',
          description: '个人信誉度积分，影响未来任务匹配优先级',
          benefits: ['信誉提升', '优先匹配', '高级任务', '平台特权']
        }
      ],
      successCases: [
        {
          title: 'AI智能客服系统',
          teamSize: 5,
          duration: '3个月',
          description: '开发了一套完整的AI智能客服系统，包含自然语言处理、情感分析和多轮对话功能。',
          topContributor: '张工程师 (35%)',
          rewards: '黄金勋章 + 技能证书 + 5000元奖金'
        },
        {
          title: '区块链溯源平台',
          teamSize: 8,
          duration: '4个月',
          description: '构建了基于区块链的农产品溯源平台，确保食品安全可追溯。',
          topContributor: '李架构师 (28%)',
          rewards: '钻石勋章 + 高级证书 + 8000元奖金'
        },
        {
          title: '物联网设备管理',
          teamSize: 6,
          duration: '2.5个月',
          description: '开发了工业物联网设备管理系统，实现设备远程监控和预测性维护。',
          topContributor: '王工程师 (32%)',
          rewards: '白银勋章 + 专业证书 + 3000元奖金'
        }
      ]
    }
  }
}
</script>

<style scoped>
.team-collaboration {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: white;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 英雄区域 */
.hero-section {
  padding: 120px 0 80px;
  text-align: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.back-button-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  font-weight: 500;
}

.back-button:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.back-button i {
  font-size: 0.9rem;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.hero-features {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 2rem;
  border-radius: 25px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
}

.feature-item i {
  color: #3b82f6;
  font-size: 1.2rem;
}

/* 通用section样式 */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 工作流程 */
.workflow-section {
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.02);
}

.workflow-steps {
  display: grid;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.step {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  gap: 2rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.step-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.step-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.step-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.step-details {
  list-style: none;
  padding: 0;
}

.step-details li {
  color: rgba(255, 255, 255, 0.7);
  padding: 0.3rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.step-details li::before {
  content: '•';
  color: #3b82f6;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.step-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 50%;
  color: #3b82f6;
  font-size: 1.5rem;
}

/* 贡献评估 */
.contribution-section {
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.02);
}

.evaluation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.evaluation-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  text-align: center;
  transition: all 0.3s ease;
}

.evaluation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
  font-size: 2rem;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.evaluation-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.evaluation-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.evaluation-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.feature-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: 0.9rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* 奖励分配 */
.reward-section {
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.02);
}

.reward-content {
  display: grid;
  gap: 4rem;
}

.reward-principles h3,
.reward-types h3 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: white;
  text-align: center;
  font-weight: 600;
}

.principles-grid,
.types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.principle-card,
.type-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  text-align: center;
  transition: all 0.3s ease;
}

.principle-card:hover,
.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.principle-icon,
.type-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
  font-size: 1.5rem;
}

.principle-icon {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.medal-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.certificate-blue {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.reward-green {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.reputation-purple {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.principle-card h4,
.type-card h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.principle-card p,
.type-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.type-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.benefit-tag {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: 0.9rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* 成功案例 */
.success-cases {
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.02);
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.case-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.case-header {
  margin-bottom: 1rem;
}

.case-header h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: white;
  font-weight: 600;
}

.case-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.stat i {
  color: #3b82f6;
}

.case-description {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.case-results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.result-value {
  color: #3b82f6;
  font-weight: 600;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-features {
    flex-direction: column;
    align-items: center;
  }
  
  .step {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  
  .step-number,
  .step-icon {
    margin: 0 auto;
  }
  
  .evaluation-grid,
  .principles-grid,
  .types-grid,
  .cases-grid {
    grid-template-columns: 1fr;
  }
  
  .case-stats {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .result-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}
</style>
